EGroupware / egroupware

var et2_calendar_planner = (function(){ "use strict"; return et2_calendar_view.extend([et2_IDetachedDOM, et2_IResizeable, et2_IPrint],

{

	createNamespace: true,

	attributes: {

		group_by: {

			name: "Group by",

			type: "string", // or category ID

			default: "0",

			description: "Display planner by 'user', 'month', or the given category"

		},

		filter: {

			name: "Filter",

			type: "string",

			default: '',

			description: 'A filter that is used to select events.  It is passed along when events are queried.'

		},

		show_weekend: {

			name: "Weekends",

			type: "boolean",

			default: egw.preference('days_in_weekview','calendar') != 5,

			description: "Display weekends.  The date range should still include them for proper scrolling, but they just won't be shown."

		},

		hide_empty: {

			name: "Hide empty rows",

			type: "boolean",

			default: false,

			description: "Hide rows with no events."

		},

		value: {

			type: "any",

			description: "A list of events, optionally you can set start_date, end_date and group_by as keys and events will be fetched"

		},

		"onchange": {

			"name": "onchange",

			"type": "js",

			"default": et2_no_init,

			"description": "JS code which is executed when the date range changes."

		},

		"onevent_change": {

			"name": "onevent_change",

			"type": "js",

			"default": et2_no_init,

			"description": "JS code which is executed when an event changes."

		}

	},

	DEFERRED_ROW_TIME: 100,

	/**

	 * Constructor

	 *

	 * @memberOf et2_calendar_planner

	 * @constructor

	 */

	init: function() {

		this._super.apply(this, arguments);

		// Main container

		this.div = jQuery(document.createElement("div"))

			.addClass("calendar_plannerWidget");

		// Header

		this.gridHeader = jQuery(document.createElement("div"))

			.addClass("calendar_plannerHeader")

			.appendTo(this.div);

		this.headerTitle = jQuery(document.createElement("div"))

			.addClass("calendar_plannerHeaderTitle")

			.appendTo(this.gridHeader);

		this.headers = jQuery(document.createElement("div"))

			.addClass("calendar_plannerHeaderRows")

			.appendTo(this.gridHeader);

		this.rows = jQuery(document.createElement("div"))

			.addClass("calendar_plannerRows")

			.appendTo(this.div);

		this.grid = jQuery(document.createElement("div"))

			.addClass("calendar_plannerGrid")

			.appendTo(this.div);

		this.vertical_bar = jQuery(document.createElement("div"))

			.addClass('verticalBar')

			.appendTo(this.div);

		this.value = [];

		// Update timer, to avoid redrawing twice when changing start & end date

		this.update_timer = null;

		this.doInvalidate = true;

		this.setDOMNode(this.div[0]);

		this.registeredCallbacks = [];

		this.cache = {};

		this._deferred_row_updates = {};

	},

	destroy: function() {

		this._super.apply(this, arguments);

		this.div.off();

		for(var i = 0; i < this.registeredCallbacks.length; i++)

		{

			egw.dataUnregisterUID(this.registeredCallbacks[i],false,this);

		}

	},

	doLoadingFinished: function() {

		this._super.apply(this, arguments);

		// Don't bother to draw anything if there's no date yet

		if(this.options.start_date)

		{

			this._drawGrid();

		}

		// Automatically bind drag and resize for every event using jQuery directly

		// - no action system -

		var planner = this;

		this.cache = {};

		this._deferred_row_updates = {};

		/**

		 * If user puts the mouse over an event, then we'll set up resizing so

		 * they can adjust the length.  Should be a little better on resources

		 * than binding it for every calendar event.

		 */

		this.div.on('mouseover', '.calendar_calEvent:not(.ui-resizable):not(.rowNoEdit)', function() {

				// Load the event

				planner._get_event_info(this);

				var that = this;

				//Resizable event handler

				jQuery(this).resizable

				({

					distance: 10,

					grid: [5, 10000],

					autoHide: false,

					handles: 'e',

					containment:'parent',

					/**

					 *  Triggered when the resizable is created.

					 *

					 * @param {event} event

					 * @param {Object} ui

					 */

					create:function(event, ui)

					{

						var resizeHelper = event.target.getAttribute('data-resize');

						if (resizeHelper == 'WD' || resizeHelper == 'WDS')

						{

							jQuery(this).resizable('destroy');

						}

					},

					/**

					 * If dragging to resize an event, abort drag to create

					 *

					 * @param {jQuery.Event} event

					 * @param {Object} ui

					 */

					start: function(event, ui)

					{

						if(planner.drag_create.start)

						{

							// Abort drag to create, we're dragging to resize

							planner._drag_create_end({});

						}

					},

					/**

					 * Triggered at the end of resizing the calEvent.

					 *

					 * @param {event} event

					 * @param {Object} ui

					 */

					stop:function(event, ui)

					{

						var e = new jQuery.Event('change');

						e.originalEvent = event;

						e.data = {duration: 0};

						var event_data = planner._get_event_info(this);

						var event_widget = planner.getWidgetById(event_data.widget_id);

						var sT = event_widget.options.value.start_m;

						if (typeof this.dropEnd != 'undefined')

						{

							var eT = parseInt(this.dropEnd.getUTCHours() * 60) + parseInt(this.dropEnd.getUTCMinutes());

							e.data.duration = ((eT - sT)/60) * 3600;

							if(event_widget)

							{

								event_widget.options.value.end_m = eT;

								event_widget.options.value.duration = e.data.duration;

							}

							// Leave the helper there until the update is done

							var loading = ui.helper.clone().appendTo(ui.helper.parent());

							// and add a loading icon so user knows something is happening

							jQuery('.calendar_timeDemo',loading).after('<div class="loading"></div>');

							jQuery(this).trigger(e);

							// That cleared the resize handles, so remove for re-creation...

							jQuery(this).resizable('destroy');

							// Remove loading, done or not

							loading.remove();

						}

						// Clear the helper, re-draw

						if(event_widget)

						{

							event_widget._parent.position_event(event_widget);

						}

					},

					/**

					 * Triggered during the resize, on the drag of the resize handler

					 *

					 * @param {event} event

					 * @param {Object} ui

					 */

					resize:function(event, ui)

					{

						if(planner.options.group_by == 'month')

						{

							var position = {left: event.clientX, top: event.clientY};

						}

						else

						{

							var position = {top:ui.position.top, left: ui.position.left + ui.helper.width()};

						}

						planner._drag_helper(this,position,ui.helper.outerHeight());

					}

				});

			})

			.on('mousemove', function(event) {

				// Ignore headers

				if(planner.headers.has(event.target).length !== 0)

				{

					planner.vertical_bar.hide();

					return;

				}

				// Position bar by mouse

				planner.vertical_bar.position({

					my: 'right-1',

					of: event,

					collision: 'fit'

				});

				planner.vertical_bar.css('top','0px');

				// Get time at mouse

				if(jQuery(event.target).closest('.calendar_eventRows').length == 0)

				{

					// "Invalid" times, from space after the last planner row, or header

					var time = planner._get_time_from_position(event.pageX - planner.grid.offset().left, 10);

				}

				else if(planner.options.group_by == 'month')

				{

					var time = planner._get_time_from_position(event.clientX, event.clientY);

				}

				else

				{

					var time = planner._get_time_from_position(event.offsetX, event.offsetY);

				}

				// Passing to formatter, cancel out timezone

				if(time)

				{

					var formatDate = new Date(time.valueOf() + time.getTimezoneOffset() * 60 * 1000);

					planner.vertical_bar

						.html('<span>'+date(egw.preference('timeformat','calendar') == 12 ? 'h:ia' : 'H:i',formatDate)+'</span>')

						.show();

					if(planner.drag_create.event && planner.drag_create.parent && planner.drag_create.end)

					{

						planner.drag_create.end.date = time.toJSON()

						planner._drag_update_event();

					}

				}

				else

				{

					// No (valid) time, just hide

					planner.vertical_bar.hide();

				}

			})

			.on('mousedown', jQuery.proxy(this._mouse_down, this))

			.on('mouseup', jQuery.proxy(this._mouse_up, this));

		// Actions may be set on a parent, so we need to explicitly get in here

		// and get ours

		this._link_actions(this.options.actions || this._parent.options.actions || []);

		// Customize and override some draggable settings

		this.div.on('dragcreate','.calendar_calEvent', function(event, ui) {

				jQuery(this).draggable('option','cancel','.rowNoEdit');

				// Act like you clicked the header, makes it easier to position

				jQuery(this).draggable('option','cursorAt', {top: 5, left: 5});

			})

			.on('dragstart', '.calendar_calEvent', function(event,ui) {

				jQuery('.calendar_calEvent',ui.helper).width(jQuery(this).width())

					.height(jQuery(this).outerHeight())

					.css('top', '').css('left','')

					.appendTo(ui.helper);

				ui.helper.width(jQuery(this).width());

				// Cancel drag to create, we're dragging an existing event

				planner._drag_create_end();

			});

		return true;

	},

	/**

	 * These handle the differences between the different group types.

	 * They provide the different titles, labels and grouping

	 */

	groupers: {

		// Group by user has one row for each user

		user:

		{

			// Title in top left corner

			title: function() { return this.egw().lang('User');},

			// Column headers

			headers: function() {

				var start = new Date(this.options.start_date);

				var end = new Date(this.options.end_date);

				var start_date = new Date(start.getUTCFullYear(), start.getUTCMonth(),start.getUTCDate());

				var end_date = new Date(end.getUTCFullYear(), end.getUTCMonth(),end.getUTCDate());

				var day_count = Math.round((end_date - start_date) /(1000*3600*24))+1;

				if(day_count >= 6)

				{

					this.headers.append(this._header_months(start, day_count));

				}

				if(day_count < 120)

				{

					var weeks = this._header_weeks(start, day_count);

					this.headers.append(weeks);

					this.grid.append(weeks);

				}

				if(day_count < 60)

				{

					var days = this._header_days(start, day_count);

					this.headers.append(days);

					this.grid.append(days);

				}

				if(day_count <= 7)

				{

					var hours = this._header_hours(start, day_count);

					this.headers.append(hours);

					this.grid.append(hours);

				}

			},

			// Labels for the rows

			row_labels: function() {

				var labels = [];

				var already_added = [];

				var options = false;

				if(app.calendar && app.calendar.sidebox_et2 && app.calendar.sidebox_et2.getWidgetById('owner'))

				{

					options = app.calendar.sidebox_et2.getWidgetById('owner').taglist.getSelection();

				}

				else

				{

					options = this.getArrayMgr("sel_options").getRoot().getEntry('owner');

				}

				for(var i = 0; i < this.options.owner.length; i++)

				{

					var user = this.options.owner[i];

					// Handle grouped resources like mailing lists - pull it from sidebox owner

					// and expand to their contents

					if(isNaN(user) && options && options.find)

					{

						var resource = options.find(function(element) {return element.id == user;}) || {};

						if(resource && resource.resources)

						{

							for(var j = 0; j < resource.resources.length; j++)

							{

								var id = resource.resources[j];

								if(already_added.indexOf(''+id) < 0)

								{

									labels.push({

										id: id,

										label: this._get_owner_name(id)||'',

										data: {participants:id,owner:id}

									});

									already_added.push(''+id);

								}

							}

						}

						else if(already_added.indexOf(''+user) < 0)

						{

							labels.push({

								id: user,

								label: this._get_owner_name(user),

								data: {participants:user,owner:user}

							});

							already_added.push(''+user);

						}

					}

					else if (user < 0)	// groups

					{

						egw.accountData(user,'account_fullname',true,function(result) {

							for(var id in result)

							{

								if(already_added.indexOf(''+id) < 0)

								{

									this.push({id: id, label: result[id]||'', data: {participants:id,owner:id}});

									already_added.push(''+id);

								}

							}

						},labels);

					}

					else	// users

					{

						if(already_added.indexOf(user) < 0)

						{

							var label = this._get_owner_name(user)||'';

							labels.push({id: user, label: label, data: {participants:user,owner:''}});

							already_added.push(''+user);

						}

					}

				}

				return labels.sort(function(a,b) {

					return a.label.localeCompare(b.label);

				});

			},

			// Group the events into the rows

			group: function(labels, rows, event) {

				// convert filter to allowed status

				var status_to_show = ['U','A','T','D','G'];

				switch(this.options.filter)

				{

					case 'unknown':

						status_to_show = ['U','G']; break;

					case 'accepted':

						status_to_show = ['A']; break;

					case 'tentative':

						status_to_show = ['T']; break;

					case 'rejected':

						status_to_show = ['R']; break;

					case 'delegated':

						status_to_show = ['D']; break;

					case 'all':

						status_to_show = ['U','A','T','D','G','R']; break;

					default:

						status_to_show = ['U','A','T','D','G']; break;

				}

				var participants = event.participants;

				var add_row = function(user, participant) {

					var label_index = false;

					for(var i = 0; i < labels.length; i++)

					{

						if(labels[i].id == user)

						{

							label_index = i;

							break;

						}

					}

					if(participant && label_index !== false && status_to_show.indexOf(participant.substr(0,1)) >= 0 ||

						this.options.filter === 'owner' && event.owner === user)

					{

						if(typeof rows[label_index] === 'undefined')

						{

							rows[label_index] = [];

						}

						rows[label_index].push(event);

					}

				};

				for(var user in participants)

				{

					var participant = participants[user];

					if (parseInt(user) < 0)	// groups

					{

						var planner = this;

						egw.accountData(user,'account_fullname',true,function(result) {

							for(var id in result)

							{

								if(!participants[id]) add_row.call(planner,id,participant);

							}

						},labels);

						continue;

					}

					add_row.call(this, user, participant);

				}

			},

			// Draw a single row

			draw_row: function(sort_key, label, events) {

				var row = this._drawRow(sort_key, label,events,this.options.start_date, this.options.end_date);

				if(this.options.hide_empty && !events.length)

				{

					row.set_disabled(true);

				}

				// Highlight current user, sort_key is account_id

				if(sort_key === egw.user('account_id'))

				{

					row.set_class('current_user')

				}

				// Since the daywise cache is by user, we can tap in here

				var t = new Date(this.options.start_date);

				var end = new Date(this.options.end_date);

				do

				{

					var cache_id = app.classes.calendar._daywise_cache_id(t, sort_key);

					egw.dataRegisterUID(cache_id, row._data_callback, row);

					t.setUTCDate(t.getUTCDate() + 1);

				}

				while(t < end);

				return row;

			}

		},

		// Group by month has one row for each month

		month:

		{

			title: function() { return this.egw().lang('Month');},

			headers: function() {

				this.headers.append(this._header_day_of_month());

			},

			row_labels: function() {

				var labels = [];

				var d = new Date(this.options.start_date);

				d = new Date(d.valueOf() + d.getTimezoneOffset() * 60 * 1000);

				for(var i = 0; i < 12; i++)

				{

					// Not using UTC because we corrected for timezone offset

					labels.push({id: d.getFullYear() +'-'+d.getMonth(), label:this.egw().lang(date('F',d))+' '+d.getFullYear()});

					d.setMonth(d.getMonth()+1);

				}

				return labels;

			},

			group: function(labels, rows,event) {

				// Yearly planner does not show infologs

				if(event && event.app && event.app == 'infolog') return;

				var start = new Date(event.start);

				start = new Date(start.valueOf() + start.getTimezoneOffset() * 60 * 1000);

				var key = start.getFullYear() +'-'+start.getMonth();

				var label_index = false;

				for(var i = 0; i < labels.length; i++)

				{

					if(labels[i].id == key)

					{

						label_index = i;

						break;

					}

				}

				if(typeof rows[label_index] === 'undefined')

				{

					rows[label_index] = [];

				}

				rows[label_index].push(event);

				// end in a different month?

				var end = new Date(event.end);

				end = new Date(end.valueOf() + end.getTimezoneOffset() * 60 * 1000);

				var end_key = end.getFullYear() +'-'+end.getMonth();

				var year = start.getFullYear();

				var month = start.getMonth();

				while(key !== end_key)

				{

					if (++month > 11)

					{

						++year;

						month = 0;

					}

					key = sprintf('%04d-%d',year,month);

					for(var i = 0; i < labels.length; i++)

					{

						if(labels[i].id == key)

						{

							label_index = i;

							if(typeof rows[label_index] === 'undefined')

							{

								rows[label_index] = [];

							}

							break;

						}

					}

					rows[label_index].push(event);

				}

			},

			// Draw a single row, but split up the dates

			draw_row: function(sort_key, label, events)

			{

				var key = sort_key.split('-');

				var start = new Date(key[0]+"-"+sprintf("%02d",parseInt(key[1])+1)+"-01T00:00:00Z");

				// Use some care to avoid issues with timezones and daylight savings

				var end = new Date(start);

				end.setUTCMonth(start.getUTCMonth() + 1);

				end.setUTCDate(1);

				end.setUTCHours(0);

				end.setUTCMinutes(0);

				end = new Date(end.valueOf() - 1000);

				end.setUTCMonth(start.getUTCMonth())

				this._drawRow(sort_key, label, events, start, end);

			}

		},

		// Group by category has one row for each [sub]category

		category:

		{

			title: function() { return this.egw().lang('Category');},

			headers: function() {

				var start = new Date(this.options.start_date);

				var end = new Date(this.options.end_date);

				var start_date = new Date(start.getUTCFullYear(), start.getUTCMonth(),start.getUTCDate());

				var end_date = new Date(end.getUTCFullYear(), end.getUTCMonth(),end.getUTCDate());

				var day_count = Math.round((end_date - start_date) /(1000*3600*24))+1;

				if(day_count >= 6)

				{

					this.headers.append(this._header_months(start, day_count));

				}

				if(day_count < 120)

				{

					var weeks = this._header_weeks(start, day_count);

					this.headers.append(weeks);

					this.grid.append(weeks);

				}

				if(day_count < 60)

				{

					var days = this._header_days(start, day_count);

					this.headers.append(days);

					this.grid.append(days);

				}

				if(day_count <= 7)

				{

					var hours = this._header_hours(start, day_count);

					this.headers.append(hours);

					this.grid.append(hours);

				}

			},

			row_labels: function() {

				var im = this.getInstanceManager();

				var categories = et2_selectbox.cat_options({

						_type:'select-cat',

						getInstanceManager: function() {return im;}

					},{application: 'calendar'});

				var labels = [];

				if(!app.calendar.state.cat_id ||

					app.calendar.state.cat_id.toString() === '' ||

					app.calendar.state.cat_id.toString() == '0'

				)

				{

					app.calendar.state.cat_id = '';

					labels.push({id:'',value:'',label: egw.lang('none'), main: '', data: {}});

					labels = labels.concat(categories);

				}

				else

				{

					var cat_id = app.calendar.state.cat_id;

					if(typeof cat_id == 'string')

					{

						cat_id = cat_id.split(',');

					}

					for(var i = 0; i < cat_id.length; i++)

					{

						// Find label for that category

						for(var j = 0; j < categories.length; j++)

						{

							if(categories[j].value == cat_id[i])

							{

								categories[j].id = categories[j].value;

								labels.push(categories[j]);

								break;

							}

						}

						// Get its children immediately

						egw.json(

							'EGroupware\\Api\\Etemplate\\Widget\\Select::ajax_get_options',

							['select-cat',',,,calendar,'+cat_id[i]],

							function(data) {

								labels = labels.concat(data);

							}

						).sendRequest(false);

					}

				}

				for(var i = labels.length -1; i >= 0; i--)

				{

					labels[i].id = labels[i].value;

					labels[i].data = {

						cat_id: labels[i].id,

						main: labels[i].value==labels[i].main

					};

					if(labels[i].children && labels[i].children.length)

					{

						labels[i].data.has_children = true;

					}

				}

				return labels;

			},

			group: function(labels, rows, event) {

				var cats = event.category;

				if(typeof event.category === 'string')

				{

					cats = cats.split(',');

				}

				for(var cat = 0; cat < cats.length; cat++)

				{

					var label_index = false;

					var category = cats[cat] ? parseInt(cats[cat],10) : false;

					if(category == 0 || !category) category = '';

					for(var i = 0; i < labels.length; i++)

					{

						if(labels[i].id == category)

						{

							// If there's no cat filter, only show the top level

							if(!app.calendar.state.cat_id)

							{

								for(var j = 0; j < labels.length; j++)

								{

									if(labels[j].id == labels[i].main)

									{

										label_index = j;

										break;

									}

								}

								break;

							}

							label_index = i;

							break;

						}

					}

					if(typeof rows[label_index] === 'undefined')

					{

						rows[label_index] = [];

					}

					if(rows[label_index].indexOf(event) === -1)

					{

						rows[label_index].push(event);

					}

				}

			},

			draw_row: function(sort_key, label, events) {

				var row = this._drawRow(sort_key, label,events,this.options.start_date, this.options.end_date);

				if(this.options.hide_empty && !events.length)

				{

					row.set_disabled(true);

				}

				return row;

			}

		}

	},

	/**

	 * Something changed, and the planner needs to be re-drawn.  We wait a bit to

	 * avoid re-drawing twice if start and end date both changed, then recreate.

	 *

	 * @param {boolean} trigger =false Trigger an event once things are done.

	 *	Waiting until invalidate completes prevents 2 updates when changing the date range.

	 * @returns {undefined}

	 */

	invalidate: function(trigger) {

		// Busy

		if(!this.doInvalidate) return;

		// Not yet ready

		if(!this.options.start_date || !this.options.end_date) return;

		// Wait a bit to see if anything else changes, then re-draw the days

		if(this.update_timer !== null)

		{

			window.clearTimeout(this.update_timer);

		}

		this.update_timer = window.setTimeout(jQuery.proxy(function() {

			this.widget.doInvalidate = false;

			// Show AJAX loader

			this.widget.loader.show();

			this.widget.cache = {};

			this._deferred_row_updates = {};

			this.widget._fetch_data();

			this.widget._drawGrid();

			if(this.trigger)

			{

				this.widget.change();

			}

			this.widget.update_timer = null;

			this.widget.doInvalidate = true;

			window.setTimeout(jQuery.proxy(function() {if(this.loader) this.loader.hide();},this.widget),500);

		},{widget:this,"trigger":trigger}),ET2_GRID_INVALIDATE_TIMEOUT);

	},

	detachFromDOM: function() {

		// Remove the binding to the change handler

		jQuery(this.div).off("change.et2_calendar_timegrid");

		this._super.apply(this, arguments);

	},

	attachToDOM: function() {

		this._super.apply(this, arguments);

		// Add the binding for the event change handler

		jQuery(this.div).on("change.et2_calendar_timegrid", '.calendar_calEvent', this, function(e) {

			// Make sure function gets a reference to the widget

			var args = Array.prototype.slice.call(arguments);

			if(args.indexOf(this) == -1) args.push(this);

			return e.data.event_change.apply(e.data, args);

		});

		// Add the binding for the change handler

		jQuery(this.div).on("change.et2_calendar_timegrid", '*:not(.calendar_calEvent)', this, function(e) {

				return e.data.change.call(e.data, e, this);

			});

	},

	getDOMNode: function(_sender)

	{

		if(_sender === this || !_sender)

		{

			return this.div[0];

		}

		if(_sender._parent === this)

		{

			return this.rows[0];

		}

	},

	/**

	 * Creates all the DOM nodes for the planner grid

	 *

	 * Any existing nodes (& children) are removed, the headers & labels are

	 * determined according to the current group_by value, and then the rows

	 * are created.

	 *

	 * @method

	 * @private

	 *

	 */

	_drawGrid: function()

	{

		this.div.css('height', this.options.height);

		// Clear old events

		var delete_index = this._children.length - 1;

		while(this._children.length > 0 && delete_index >= 0)

		{

			this._children[delete_index].free();

			this.removeChild(this._children[delete_index--]);

		}

		// Clear old rows

		this.rows.empty()

			.append(this.grid);

		this.grid.empty();

		var grouper = this.grouper;

		if(!grouper) return;

		// Headers

		this.headers.empty();

		this.headerTitle.text(grouper.title.apply(this));

		grouper.headers.apply(this);

		this.grid.find('*').contents().filter(function(){

			return this.nodeType === 3;

		}).remove();

		// Get the rows / labels

		var labels = grouper.row_labels.call(this);

		// Group the events

		var events = {};

		for(var i = 0; i < this.value.length; i++)

		{

			grouper.group.call(this, labels, events, this.value[i]);

		}

		// Set height for rows

		this.rows.height(this.div.height() - this.headers.outerHeight());

		// Draw the rows

		for(var key in labels)

		{

			if (!labels.hasOwnProperty(key)) continue;

			// Skip sub-categories (events are merged into top level)

			if(this.options.group_by == 'category' &&

				(!app.calendar.state.cat_id || app.calendar.state.cat_id == '') &&

				labels[key].id != labels[key].main

			)

			{

				continue;

			}

			var row = grouper.draw_row.call(this,labels[key].id, labels[key].label, events[key] || []);

			// Add extra data for clicking on row

			if(row)

			{

				for(var extra in labels[key].data)

				{

					row.getDOMNode().dataset[extra] = labels[key].data[extra];

				}

			}

		}

		// Adjust header if there's a scrollbar

		if(this.rows.children().last().length)

		{

			this.gridHeader.css('margin-right', (this.rows.width() - this.rows.children().last().width()) + 'px');

		}

		// Add actual events

		for(var key in this._deferred_row_updates)

		{

			window.clearTimeout(key);

		}

		window.setTimeout(jQuery.proxy(function() {

			this._deferred_row_update();

		}, this ),this.DEFERRED_ROW_TIME)

		this.value = [];

	},

	/**

	 * Draw a single row of the planner

	 *

	 * @param {string} key Index into the grouped labels & events

	 * @param {string} label

	 * @param {Array} events

	 * @param {Date} start

	 * @param {Date} end

	 */

	_drawRow: function(key, label, events, start, end)

	{

		var row = et2_createWidget('calendar-planner_row',{

				id: 'planner_row_'+key,

				label: label,

				start_date: start,

				end_date: end,

				value: events,

				readonly: this.options.readonly

			},this);

		if(this.isInTree())

		{

			row.doLoadingFinished();

		}

		return row;

	},

	_header_day_of_month: function()

	{

		var day_width = 3.23; // 100.0 / 31;

		// month scale with navigation

		var content = '<div class="calendar_plannerScale">';

		var start = new Date(this.options.start_date);

		start = new Date(start.valueOf() + start.getTimezoneOffset() * 60 * 1000);

		var end = new Date(this.options.end_date);

		end = new Date(end.valueOf() + end.getTimezoneOffset() * 60 * 1000);

		var title = this.egw().lang(date('F',start))+' '+date('Y',start)+' - '+

			this.egw().lang(date('F',end))+' '+date('Y',end);

		content += '<div class="calendar_plannerMonthScale th et2_link" style="left: 0; width: 100%;">'+

				title+"</div>";

		content += "</div>";		// end of plannerScale

		// day of month scale

		content +='<div class="calendar_plannerScale">';

		for(var left = 0, i = 0; i < 31; left += day_width,++i)

		{

			content += '<div class="calendar_plannerDayOfMonthScale " style="left: '+left+'%; width: '+day_width+'%;">'+

				(1+i)+"</div>\n";

		}

		content += "</div>\n";

		return content;

	},

	/**

	 * Make a header showing the months

	 * @param {Date} start

	 * @param {number} days

	 * @returns {string} HTML snippet

	 */

	_header_months: function(start, days)

	{

		var content = '<div class="calendar_plannerScale">';

		var days_in_month = 0;

		var day_width = 100 / days;

		var end = new Date(start);

		end.setUTCDate(end.getUTCDate()+days);

		var t = new Date(start.valueOf());

		for(var left = 0,i = 0; i < days;t.setUTCDate(1),t.setUTCMonth(t.getUTCMonth()+1),left += days_in_month*day_width,i += days_in_month)

		{

			var u = new Date(t.getUTCFullYear(),t.getUTCMonth()+1,0,-t.getTimezoneOffset()/60);

			days_in_month =  1+ ((u-t) / (24*3600*1000));

			var first = new Date(t.getUTCFullYear(),t.getUTCMonth(),1,-t.getTimezoneOffset()/60);

			if(days_in_month <= 0) break;

			if (i + days_in_month > days)

			{

				days_in_month = days - i;